//获取url中参数值
function getQueryString(name) { 
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 
    var r = window.location.search.substr(1).match(reg); 
    if (r != null) return unescape(r[2]); 
    return null; 
}
//提示信息
function toast(content) {
    if (content == null || content == '') {
      return;
    }
    layer.msg(content);
}
//格式化日期 date对象转字符串 2018-04-03
function getDateStr(d){
	var defaultMonth = d.getMonth()+1>9?(d.getMonth()+1):"0"+(d.getMonth()+1);//保证月份为两位
	var defaultDay = d.getDate()>9?d.getDate():"0"+d.getDate();//保证月份为两位
	var defaultDate = d.getFullYear()+"-"+defaultMonth+"-"+defaultDay;//当前时间
	return defaultDate;
}
//字符串转日期对象 2018-3-4
function getDateObj(str){
	var arr = str.split('-');
	var dateObj = new Date(arr[0],arr[1]-1,arr[2])
	return dateObj;
}
//获取从当前日期str("2018-04-05")往前的num天
function getDateArr(str,num){
	var dateArr = []
	var str = str;
	for(var i=0;i<num;i++){
		var d = new Date(getDateObj(str))
		var defaultMonth = d.getMonth()+1;//月份
//		var defaultMonth = d.getMonth()+1>9?(d.getMonth()+1):"0"+(d.getMonth()+1);//保证月份为两位
		var defaultDay = d.getDate();//日期
//		var defaultDay = d.getDate()>9?d.getDate():"0"+d.getDate();//保证日期为两位
		var preDaystr = defaultMonth+'/'+defaultDay;//拼接字符串
//		console
		dateArr.push(preDaystr)//push进数组
		var preDay = new Date(getDateObj(str)-24*60*60*1000)
//		console.log(preDay)
		str = getDateStr(preDay);//前一天
	}
	return dateArr.reverse();
}
//日流量endDate:'2018-04-03',dataCon当日流量数据显示容器
function getWaterFlowChart(container,ajaxparam,endDate,dataCon){
	$.ajax({
		type:"post",
		url:actUrl,
		async:true,
		contentType:"application/x-www-form-urlencoded;charset=UTF-8",
		data:ajaxparam,
		success:function(res){
			console.log("日流量",res)
			var dataArr = res.data;
			var dataArrShow = [];
			var allWaterFlow = 0;//本日累计流量
			if(dataArr){
				for(var i = 0;i<dataArr.length;i+=3){
					var waterFlow = parseInt((dataArr[i].waterFlow).toFixed(0));
					dataArrShow.push(waterFlow)
					allWaterFlow+=waterFlow;
				}				
			}else{
				return;
			}
//			console.log(dataArrShow)	
//			console.log('getDateArr使用的日期',endDate)
			//渲染图表
			var xAxiasArr = ["0时","3时","6时","9时","12时","15时","18时","21时"]
			barChart(container,xAxiasArr,dataArrShow)
			$(dataCon).text(allWaterFlow+'L')
		},
		error:function(err){
			console.log("日流量error",err)
		}
	});	
}
// PH图表，容器str,ajax请求参数，
//截止日期str，显示的数据保留小数点后位数
//当日数据显示容器
function getPHChart(container,ajaxparam,endDate,dataCon){
	$.ajax({
		type:"post",
		url:actUrl,
		async:true,
		contentType:"application/x-www-form-urlencoded;charset=UTF-8",
		data:ajaxparam,
		success:function(res){
			console.log("PH",res)
			var dataArr = res.data;
			var dataArrShow = [];
			for(var i = 0;i<dataArr.length;i++){
//				console.log(i,dataArr[i])
				var ph = parseFloat((dataArr[i].ph).toFixed(1));
				dataArrShow.push(ph)
			}
//			console.log(dataArrShow)	
//			console.log('getDateArr使用的日期',endDate)
			//渲染图表
			var xAxiaxArr = getDateArr(endDate,dataArrShow.length);
			barChart(container,xAxiaxArr,dataArrShow)
			$(dataCon).text(dataArrShow[0]+'')
		},
		error:function(err){
			console.log("PH error",err)
		}
	});
}
//水硬度Ca、Mg
function getCaMgChart(container,ajaxparam,endDate){
	//水硬度
	$.ajax({
		type:"post",
		url:actUrl,
		async:true,
		contentType:"application/x-www-form-urlencoded;charset=UTF-8",
		data:ajaxparam,
		success:function(res){
			console.log("水硬度",res)
			var dataCaArr = [];
			var dataMgArr = [];
			if(res.code == 0){
				var data = res.data;			
				for(var i=0;i<data.length;i++){
					dataCaArr.push(parseInt(data[i].ca))
					dataMgArr.push(parseInt(data[i].mg))
				}
				console.log(dataCaArr,dataMgArr)
				//绘制图表
				var xAxiasArr = getDateArr(endDate,data.length);
				lineChart(container,xAxiasArr,dataCaArr,dataMgArr)
			}else{
				console.log("success but ")
			}
		},
		error:function(err){
			console.log("error",err)
		}
	});
}

//获取 重金属过滤
function getGuoLvChart(ajaxparam){
	$.ajax({
		type:"post",
		url:actUrl,
		async:true,
		contentType:"application/x-www-form-urlencoded;charset=UTF-8",
		data:ajaxparam,
		success:function(res){
			console.log("过滤重金属",res)
			
			if(res.code == 0){
				var data = res.data	
				var startColorArr = ['#ff2256','#04a398','#18a8e6'];
				var endColorArr = ['#f8b62d','#edea07','#323692'];
//				CircleChart(container,startColor,endColor)
				$("#circlesBox").empty()
				for(var i=0;i<data.length;i++){
					var dataObj = data[i];
					var removalRate = (dataObj.removalRate).toFixed(3);
					var guolvContainer="guolvContainer"+i;
					var j=0;//颜色，旋转角度
					if(i>2){
						j = i%3;
					}else{
						j=i;
					}
					var $circleBox = `<div class="circleBox">
						<div class="name name${j}">${dataObj.heavyMetal}</div>
						<div class='chart${j}'>
							<div id="${guolvContainer}" style="height: 2.1rem;width: 2.1rem;float: left;"></div>						
						</div>
						<div class="circle1Value circle1ValueRed">
							<h4>${removalRate}μg</h4>
							<p>金属元素浓度</p>
						</div>
					</div>`
					$("#circlesBox").append($circleBox)
					//绘制图表
					CircleChart(guolvContainer,startColorArr[j],endColorArr[j])
				}
			}else{
				console.log("success but ")
			}
		},
		error:function(err){
			console.log("过滤重金属error",err)
		}
	});
}

//柱形图
function barChart(container,xAxiasArr,dataShow){
	Highcharts.chart(container, {
	    chart: {
	        type: 'column'
	    },
	    title: {
	        text: "",
	        style:{//样式
			  color: '#00ab81',
			  fontSize: '0.6rem',//
			},
	//		floating:true,//浮动
	//		margin:-10,
			y:40
			
	    },
	    xAxis: {//x轴（日期）
	        categories: xAxiasArr,//横坐标轴
			lineWidth:0,//轴线宽度
	        tickColor:"#fff",//刻度线颜色
	    },
	    yAxis: {//y轴，不显示
	        min: 0,
	        title: {
	            text: 'Rainfall (mm)'
	        },
	        visible:false,//不显示
	    },
	    tooltip: {
	        enabled:false,//禁用提示框
	    },
	    plotOptions: {//柱状图
	        column: {
	            pointPadding: 0.2,
	            borderWidth: 0,
	            borderRadius:6,
	            pointWidth:10
	        }
	    },
	    series: [{
	        name: '当日流量',
	        data: dataShow,
	        color:{//柱形图渐变色
	        	 linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
				  stops: [
				      [0, '#2ab190'],
				      [1, '#d0d902']
				  ]
	        },
	        dataLabels: {//柱形图上的数据
	            enabled: true,
	            style:{
	            	fontWeight:"500"
	            },
	        },
	        point: {
	            events: {//点击当前柱形
	                click: function () {
	                    console.log(this.y)
	               
	                }
	            }
	        }
	    }],
	    legend: {
	        enabled: false//不显示标签
	    },
	    credits: {
	        enabled: false//不显示版权信息
	    },
	})
}
//折线图
function lineChart(container,xAxisArr,data1,data2){
	Highcharts.chart(container, {
	    chart: {
	        type: 'line'
	    },
	    title: {
	        text: ''
	    },
	    xAxis: {
	        categories: xAxisArr,
	        align: 'center',
	        tickWidth:0,
	        startOnTick: true,
	        endOnTick: true,
	        gridLineWidth: 1
	    },
	    yAxis: {
	    	align: 'center',
	        title:{
	        	text:"",
	        	rotation:360,
	        	y:-10
	        },
			tickPositions: [0, 40, 80, 120,160,200]
	    },
	    plotOptions: {
			marker:{
				
			},
	        series: {
	            animation: false
	        }
	    },
	    tooltip:{
	    	enabled:false
	    },
	    series: [{
	        name: 'Ca硬度',
	        data: data1,
	        color:{
	        	linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
				stops: [
				    [0, '#2ab190'],
				    [1, '#d0d902']
				]
	        },
	        marker:{
				symbol:"circle",
				states: {
	                hover: {
	                    enabled: false
	                }
	            }
			},
			
	        
	    }, {
	        name: 'Mg硬度',
	        data: data2,
	        color:{
	        	linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
				stops: [
				    [0, '#fd598c'],
				    [1, '#ffb762']
				]
	        },
	        marker:{//标记点
				symbol:"circle",
				states: {
	                hover: {
	                    enabled: false
	                }
	            }
			}
	    }],
	    legend: {
	        enabled: false,//不显示标签
			layout: 'vertical',
	        backgroundColor: '#FFFFFF',
	        floating: true,
	        align: 'left',
	        x: 160,
	        verticalAlign: 'top',
	        y: -40
	    },
	    credits: {
	        enabled: false//不显示版权信息
	    },
	});	
}

function CircleChart(container,startcolor,endColor){
	Highcharts.chart(container, {
	    chart: {
	        type: 'solidgauge',
	        height: '110%',
	    },
	
	    title: {
	        text: '',//配置图表标题	
	    },
	
	    tooltip: {
	        enabled:false,//禁用提示框
	    },
	    pane: {
	        startAngle: 0,
	        endAngle: 360,
	        background: [{ // Track for Move
	            outerRadius: '112%',
	            innerRadius: '88%',
				backgroundColor:"#f0f0f1",//环形背景色
	            borderWidth: 0
	        },
	        ]
	    },
	
	    yAxis: {
	        min: 0,
	        max: 100,
	        lineWidth: 0,
	        tickPositions: []
	    },
	
	    plotOptions: {
	        solidgauge: {
	            dataLabels: {
	                enabled: false
	            },
	            linecap: 'square',
	            stickyTracking: false,
	            rounded: true,
	        }
	    },
	
	    series: [{
	        name: 'Move',
	        data: [{
	            color:  {linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
						  stops: [
						      [0, startcolor],//开始色，
						      [1, endColor],//结束色
						  ]
						 },
	            radius: '112%',
	            innerRadius: '88%',
	            y: 80,
	            suffix: '分 ',//单位，失败
	            selected:true,//默认选中
	        }],
	        animation: false
	    },
	    ],
	    legend: {
	        enabled: false//不显示标签
	    },
	    credits: {
	        enabled: false//不显示版权信息
	    },
	});
}
